﻿@{
    Layout = "../Shared/_LayoutMain.cshtml";
    var article = HttpHelper.Get<ArticlesClientDto>($"/client/article/show/{Model}");
    ViewBag.PageTitle = $"{article?.Title} - {ViewBag.config.WebName}";
    ViewBag.PageKeyword = article?.SeoKeyword;
    ViewBag.PageDescription = article?.SeoDescription;
}
<div class="wrapper">
    <div class="location">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>视频中心</el-breadcrumb-item>
            <el-breadcrumb-item>视频详情</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="content-box">
        <div class="box-800">
            <!--播放器.开始-->
            <div class="payer-box">
                <video id="video-payer" class="video-js" controls preload="none" width="800" height="450" :poster="common.loadFile('@article?.ImgUrl')" data-setup='{}'>
                    <source :src="common.loadFile('@article?.Fields?["video_src"]')" type="video/mp4">
                </video>
            </div>
            <!--播放器.结束-->
            <!--内容详情.开始-->
            <div class="detail-box">
                <span class="h3">@article?.Title</span>
                <div class="meta">
                    <span>来源:@article?.Source</span>
                    <span @@click="updateLike" class="icon click iconfont icon-good">{{likeCount}}</span>
                    <span class="icon iconfont icon-msg">{{commentCount}} 评论</span>
                    <span class="icon iconfont icon-date">@article?.AddTime</span>
                </div>
                <div class="content">
                    @Html.Raw(UtilsHelper.ReplaceImagesPath(article?.Content))
                </div>
            </div>
            <!--内容详情.结束-->
            <!--评论列表.开始-->
            <div v-if="isComment===1" class="ntitle">
                <div class="h3">相关评论</div>
            </div>
            <div v-if="isComment===1" class="comment-box">
                <div class="comment-from">
                    <div class="avatar-box">
                        <el-image v-if="account.avatar" :src="common.loadFile(account.avatar)"></el-image>
                        <span v-else class="icon iconfont icon-user-full"></span>
                    </div>
                    <div class="from-box">
                        <div class="input">
                            <el-input ref="inputComment" type="textarea" v-model="commentForm.content" :placeholder="commentForm.placeholder" maxlength="500" show-word-limit></el-input>
                        </div>
                        <div @@click="submitCommentReply" class="btn">发表</div>
                    </div>
                </div>
                <div class="comment-list">
                    <div v-if="listData.length===0" class="nodata">暂无相关评论...</div>
                    <div v-for="(item,index) in listData" :key="index" class="list-box">
                        <div class="head-box">
                            <div class="left">
                                <div class="avatar">
                                    <el-image :src="common.loadFile(item.userAvatar)"></el-image>
                                </div>
                                <div class="meta">
                                    <span class="name">{{item.userName}}</span>
                                    <span class="time">{{item.dateDescription}}</span>
                                </div>
                            </div>
                            <div class="right">
                                <span @@click="updateCommentLike(item)" class="icon iconfont icon-good">{{item.likeCount}}</span>
                                <span @@click="addCommentReply(item.id,item.userName)" class="icon iconfont icon-msg">回复</span>
                            </div>
                        </div>
                        <div class="content">
                            <span>{{item.content}}</span>
                        </div>
                        <div v-if="item.children.length>0">
                            <div v-for="(child,i) in item.children" :key="i" class="reply">
                                <span class="label">{{child.userName}}@@{{child.atUserName}}</span>
                                <span>{{child.content}}</span>
                                <div class="meta">
                                    <div class="left">
                                        <span>{{child.dateDescription}}</span>
                                    </div>
                                    <div class="right">
                                        <span @@click="updateCommentLike(child)" class="icon iconfont icon-good">{{child.likeCount}}</span>
                                        <span @@click="addCommentReply(child.id,child.userName)" class="icon iconfont icon-msg">回复</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="pager-box">
                    <el-pagination background
                        :hide-on-single-page="true"
                        @@current-change="handleCurrentChange"
                        :page-size="pageSize"
                        layout="prev, pager, next"
                        :total="totalCount">
                    </el-pagination>
                </div>
            </div>
            <!--评论列表.结束-->
        </div>
        <div class="box-380">
            <div class="slider-box">
                <div class="ftitle">
                    <span class="h5">人气排行</span>
                    <div class="more link">
                        <span class="icon iconfont icon-right-arrow"></span>
                    </div>
                </div>
                <div class="news-hot">
                    <a v-for="(item,index) in hotList" :key="index" class="list-box" :href="'/article/video/show/'+item.id">
                        <div class="index">{{index<9?'0'+(index+1):(index+1)}}</div>
                        <div v-if="index<2" class="img-box">
                            <el-image :src="common.loadFile(item.imgUrl)" fit="cover"></el-image>
                        </div>
                        <div v-if="index<2" class="txt-box">
                            <span class="title">{{item.title}}</span>
                            <span class="text">{{item.zhaiyao}}</span>
                            <div class="info">
                                <span class="icon iconfont icon-date">{{item.addTime}}</span>
                                <span class="icon iconfont icon-view">{{item.click}}</span>
                            </div>
                        </div>
                        <div v-else class="txt-box">
                            <span class="title">{{item.title}}</span>
                        </div>
                        <span v-if="index>=2" class="view iconfont icon-view">{{item.click}}</span>
                    </a>
                </div>
            </div>

            <div class="slider-box">
                <div class="ftitle">
                    <span class="h5">相关视频</span>
                    <div class="more link">
                        <span class="icon iconfont icon-right-arrow"></span>
                    </div>
                </div>
                <div class="picture-hot">
                    <a v-for="(item,index) in refList" :href="'/article/video/show/'+item.id" class="list-box">
                        <div class="img-box">
                            <el-image :src="common.loadFile(item.imgUrl)" fit="cover"></el-image>
                        </div>
                        <span class="title">{{item.title}}</span>
                    </a>
                </div>
            </div>

        </div>
    </div>
</div>

@section Scripts{
    <script>
        //初始化VUE
        var ve = new Vue({
            el: '#app',
            data: {
                account: {}, //会员信息
                articleId: @article.Id, //当前文章ID
                commentCount: @article.CommentCount, //评论总数
                likeCount: @article.LikeCount, //点赞总数
                isComment: @article.IsComment, //评论状态
                totalCount: 0, //总数量
                pageSize: 10, //每页显示条数
                pageIndex: 1, //当前页码
                refList: [], //相关
                hotList: [], //人气
                listData: [], //评论列表
                commentForm: {
                    parentId: 0,
                    articleId: @article.Id,
                    placeholder: '我来说几句',
                    content: '',
                    siteId: @ViewBag.site.Id,
                }
            },
            methods: {
                //加载评论列表
                async loadData() {
                    let _this = this;
                    AxiosAjax({
                        url: `/client/article/comment/${_this.articleId}?pageSize=${_this.pageSize}&pageIndex=${_this.pageIndex}`,
                        loading: true,
                        success: function (res) {
                            _this.listData = res.data;
                            let pageInfo = JSON.parse(res.headers["x-pagination"]);
                            _this.totalCount = pageInfo.totalCount;
                            _this.pageSize = pageInfo.pageSize;
                            _this.pageIndex = pageInfo.pageIndex;
                        },
                        error: function (err) {
                            _this.listData = []
                        }
                    });
                },
                //初始化数据
                async initData() {
                    let _this = this;
                    //相关
                    AxiosAjax({
                        url: `/client/article/view/${_this.articleId}/4`,
                        success: function (res) {
                            _this.refList = res.data;
                        }
                    });
                    //人气
                    AxiosAjax({
                        url: `/client/article/view/channel/video/10?siteId=@ViewBag.site.Id&orderBy=-LikeCount`,
                        success: function (res) {
                            _this.hotList = res.data;
                        }
                    });
                    //获取会员信息
                    AxiosAjax({
                        url: `/client/member`,
                        success: function (res) {
                            _this.account = res.data;
                        }
                    });
                    //加载评论
                    _this.loadData();
                },
                //跳转到第几页
                handleCurrentChange: function (val) {
                    if (this.pageIndex != val) {
                        this.pageIndex = val;
                        this.loadData();
                    }
                },
                //文章点赞
                updateLike() {
                    let _this = this;
                    AxiosAjax({
                        url: `/client/article/like/${_this.articleId}`,
                        method: "put",
                        success: function (res) {
                            _this.likeCount = res.data;
                        }
                    });
                },
                //评论点赞
                updateCommentLike(obj) {
                    let _this = this;
                    AxiosAjax({
                        url: `/account/article/comment/like/${obj.id}`,
                        method: "put",
                        success: function (res) {
                            obj.likeCount = res.data;
                        }
                    });
                },
                //回复
                addCommentReply(commentId, userName) {
                    let _this = this;
                    _this.commentForm.parentId = commentId;
                    _this.commentForm.articleId = _this.articleId;
                    _this.commentForm.siteId = @ViewBag.site.Id;
                    _this.commentForm.placeholder = `回复 ${userName}`;
                    _this.$refs.inputComment.focus();
                },
                //提交评论
                submitCommentReply() {
                    let _this = this;
                    //检查是否允许评论
                    if (_this.isComment === 0) {
                        this.$message({
                            message: '已关闭评论',
                            type: 'error'
                        });
                        return false;
                    };
                    //如果没有填写内容
                    if (!_this.commentForm.content) {
                        this.$message({
                            message: '请填写内容',
                            type: 'warning'
                        });
                        return false;
                    };
                    AxiosAjax({
                        method: "post",
                        url: `/account/article/comment/add`,
                        data: _this.commentForm,
                        successMsg: '评论发表成功',
                        success: function (res) {
                            //追加评论信息
                            if (res.data.parentId == 0) {
                                //一级评论
                                _this.listData.push(res.data);
                            } else {
                                //不是一级评论
                                for (let i=0, len=_this.listData.length; i<len; i++) {
                                    //是否挂载到当前级
                                    if (_this.listData[i].id == res.data.rootId) {
                                        _this.listData[i].children.push(res.data);
                                        break;
                                    }
                                }
                            }
                            _this.commentCount++;
                            //恢复初始评论表单
                            _this.commentForm.articleId = _this.articleId;
                            _this.commentForm.parentId = 0;
                            _this.commentForm.placeholder = '我来说几句';
                            _this.commentForm.content = '';
                            _this.commentForm.siteId = @ViewBag.site.Id;
                        }
                    });
                },
            },
            created() {
                this.initData();
            }
        })
    </script>
}